"use client";
import React from "react";
import styles from "./index.module.scss";
import { List } from "antd";
import { TCourses } from "@/app/Course/page";
type TCourseList = {
  coursesData?: TCourses[];
  lookCourse?: (value: TCourses) => void;
  isShowOpration?: boolean;
  wrapperClassName?: string;
  editeCourse?: (v: number) => void;
  delCourse?: (v: number) => void;
};
export default function CourseList(props: TCourseList) {
  const {
    coursesData,
    lookCourse,
    isShowOpration = false,
    wrapperClassName,
    editeCourse,
    delCourse,
  } = props;

  return (
    <div className={wrapperClassName}>
      <List
        header={<div className={styles["header"]}>课程列表</div>}
        size="large"
        dataSource={coursesData}
        className={styles["list"]}
        renderItem={(item) => (
          <div
            key={item.id}
            className={styles["list-item"]}
            onClick={() => lookCourse?.(item)}
          >
            {item.videoName}
            {isShowOpration && (
              <div className={styles["list-item-optation"]}>
                {/* <div className={styles["text"]}>
                  审核状态: {handleStatus(item.videoStatus)}
                </div> */}
                <div className={styles["opration"]}>
                  <span
                    className={styles["text"]}
                    onClick={() => editeCourse?.(item.id)}
                  >
                    编辑
                  </span>
                  <span
                    className={styles["text"]}
                    onClick={() => delCourse?.(item.id)}
                  >
                    删除
                  </span>
                </div>
              </div>
            )}
          </div>
        )}
      />
    </div>
  );
}
